<style lang="scss">
  @import 'index';
</style>

<template>
  <div class="ga-container">
    <div class="ga-address">
      <form action="">

        <div class="ga-input-group border">
          <label class="label">支付宝账户</label>
          <div class="input-group">
            <input type="text" placeholder="支付宝账户" v-model="alipayaccount">
          </div>
        </div>

        <div class="ga-input-group border">
          <label class="label">支付宝姓名</label>
          <div class="input-group">
            <input type="text" placeholder="支付宝姓名" v-model="alipayname">
          </div>
        </div>

        <div class="ga-input-group border">
          <label class="label">提现金额</label>
          <div class="input-group">
            <input type="number" placeholder="提现金额" v-model="amount">
          </div>
        </div>

        <div class="btn-box">
          <!--两种状态：
              gray disable 灰色禁止点击
              orange 橘色可以点击
          -->
          <button class="btn" :class="{'orange':isCompleted, 'disable': !isCompleted, 'gray': !isCompleted }" @click="handleSubmit">{{btn_txt}}</button>
        </div>
        <h3 :style="{'text-align':'center'}">Tips：提现24小时内到账</h3>
      </form>
    </div>
  </div>
</template>

<script>
import {isLogin} from '@/utils/handleLogin'
export default {
  data () {
    return {
      alipayname: '',
      alipayaccount: '',
      amount: '',
      total_money: 0,
      btn_txt: '提交'
    }
  },
  computed: {
    // 数据是否完成
    isCompleted () {
      // 这里写校验规则，如果表单数据合法，则返回true，否则返回false
      if(this.total_money<=0){
        this.btn_txt = '余额不足'
        return false
      }else{
        this.btn_txt = '提交'
      }
      if(this.alipayname == ''){
        return false
      }
      this.alipayaccount = this.alipayaccount.replace(/\D/g,'')
      if(!this.isPoneAvailable(this.alipayaccount)){
        return false
      }
      this.amount = this.amount.replace(/\D/g,'')
      if(!this.isAmount(this.amount)){
        return false
      }
      if(this.amount>this.total_money){
        return false
      }
      // 先默认为true
      return true
    }

  },
  created () {
    
  },

  methods: {
     isPoneAvailable(str) {
          var myreg=/^[1][3,4,5,7,8][0-9]{9}$/
          if (!myreg.test(str)) {
              return false;
          } else {
              return true;
          }
      },
      isAmount (str) {
          var myreg = /^[1-9]\d*$/
          if (!myreg.test(str)) {
              return false;
          } else {
              return true;
          }
      },
     /**
     * 提交数据
     * **/
    async handleSubmit () {
         let params = {
            alipayname: this.alipayname,
            alipayaccount: this.alipayaccount,
            amount: this.amount
         }
      this.$_util.ajax.post('https://guo-a.com/mapi/user/applytake?token=' + this.$store.state.Token,params).then((res)=>{
         if(res.code === 200){
            this.$_util.successToast('操作成功', () => {
              wx.navigateBack()
            })
         }
      })
    },
    async load () {
       this.$_util.ajax.post('https://guo-a.com/mapi/user/getuseraccount?token=' + this.$store.state.Token).then((res)=>{
        console.log(res)
        if(res.code === 200){
          this.total_money = parseInt(res.data.total_money)
        }
       })
    },
    /**
     * 路由跳转
     */
    bindNavigateTo (url) {
        wx.navigateTo({
          url
        })
    },
    bindSwitchTab (url) {
        wx.switchTab({
          url
        })
    }
  },
  mounted () {
    
  },
  onShow () {
    isLogin(()=>{
      this.alipayname=''
      this.alipayaccount=''
      this.amount=''
      this.total_money = 0
      this.load()
    })
  }
}
</script>
